@import './flex.scss';
page {
	background: #fff8f8;
}

.top-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 200rpx;
	border-radius: 0 0 40rpx 40rpx;
	background: #f1692b;
}

.u-button {
	border-radius: 20rpx !important;
}
.u-button--primary.u-button--plain {
	color: #f1692b !important;
	background: none !important;
}
.line-input-placeholder {
	color: #a6a1a1 !important;
}
.right-icon {
	width: 10rpx;
	height: 20rpx;
	margin-left: 30rpx;
}

.u-popup {
	// 从中间弹出
	::v-deep .u-fade-zoom-enter-to,
	::v-deep .u-fade-zoom-leave-to {
		.popup {
			width: 90vw;
			border-radius: 30rpx;
			.popup-content {
				padding: 30rpx 26rpx 20rpx;
				.title {
					text-align: center;
				}
			}
		}
	}
	// 从底部弹出
	::v-deep .u-slide-up-enter-to,
	::v-deep .u-slide-up-leave-to, {
		.popup {
			width: 100vw;
			border-radius: 30rpx 30rpx 0 0;
		}
	}
}
.popup {
	position: relative;
	height: 100%;
	background: #fff;
	.popup-top-bj {
		width: 100%;
		height: 120rpx;
		position: absolute;
		top: 0;
		left: 0;
	}
	.popup-content {
		position: relative;
		padding: 60rpx 26rpx 20rpx;
		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 32rpx;
			color: #689930;
			line-height: 38rpx;
			margin-bottom: 40rpx;
		}
		.popup-bottom {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;

			view {
				width: calc(50% - 20rpx);
			}
		}
		.rolling-region {
			max-height: 60vh;
			overflow: scroll;
			margin-bottom: 26rpx;
		}

		.picker-view {
			width: 100%;
			height: 220rpx;
			margin: 40rpx 0;

			.item {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #2c1f21;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}

.select-menu {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	.value {
		font-weight: 400;
		font-size: 28rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.value,
	.placeholder {
		// width: 100% !important;
	}
	.placeholder {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #a6a1a1;
		line-height: 33rpx;
	}

	.unit {
		text-align: right;
		width: 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #2c1f21;
		line-height: 33rpx;
	}
}

.line-content {
	.line {
		display: flex;
		justify-content: space-between;
		border-bottom: 1px solid #f6f6f6;
		padding: 26rpx 0 26rpx 20rpx;
		position: relative;
		.required {
			position: absolute;
			left: 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #f1692b;
			line-height: 33rpx;
		}
		.label,
		.value,
		input {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #2c1f21;
			line-height: 33rpx;
		}

		textarea {
			width: 100%;
			height: 80rpx;
			margin-top: 26rpx;
			font-size: 28rpx;
			color: #2c1f21;
			line-height: 33rpx;
		}
		.textarea-num {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #a6a1a1;
			line-height: 28rpx;
			text-align: right;
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: calc(100% - 150rpx);

			.value {
				width: calc(100% - 40rpx);
			}

			.unit {
				text-align: right;
				width: 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #2c1f21;
				line-height: 33rpx;
			}
		}

		.label {
			width: 150rpx;
		}

		.value,
		.placeholder {
			text-align: right;
			width: calc(100% - 150rpx);
		}
		.value,
		.line-right {
			.value,
			.placeholder {
				width: 100%;
			}
		}

		.desc {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #a6a1a1;
			line-height: 28rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.placeholder {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #a6a1a1;
			line-height: 33rpx;
		}
	}

	.line:last-child {
		border: 0;
	}
	.nflex {
		display: block;
		.label {
			width: 100%;
		}
	}
}
